<template>
  <div class="about">
    <div class="head">
      <div class="erwm">
        <img src="@/assets/二维码.png" alt="" />
      </div>
      <div class="size">
        <img src="@/assets/关注.png" alt="" />
        <span class="guanzhu"
          >关注房先森官方微信公众号<span class="huang">sirfang_com</span></span
        ><br />
      </div>
      <div class="cha">X</div>
    </div>
    <div class="input">
      <van-search v-model="value" show-action>
        <template #action>
          <div>搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 装修 -->
    <div class="ul">
      <li v-for="(item,i) in nav" :key="item" :class="i == flag ?'active':''" @click="flag = i">{{item}}</li>
    </div>
    <!-- 收房验房 -->
    <div class="shou">
        <li>
          <i class="iconfont icon-house"></i> 
          <span>装修贷款</span>
        </li>
        <li @click="$router.push('/Budget')">
          <i class="iconfont icon-budget"></i> 
          <span>装修预算</span>
        </li>
        <li>
          <i class="iconfont icon-taiji"></i>
          <span>装修风水</span>
        </li>
        <li>
          <i class="iconfont icon-designer"></i>
          <span>装修设计</span>
        </li>
    </div>
    <van-button type="default" class="button" @click="gotoProcess"
      >了解装修流程</van-button
    >
    <!-- 为你推荐 -->
    <div class="tuijian">
      <span></span>
     <h3>为您推荐</h3>
    </div>
    <!-- 列表 -->
    <div class="list">
      <list v-for="item in ress" :key="item.id" :item="item"></list>
    </div>
    <div class="box">
      <Myfoot></Myfoot>
    </div>
  </div>
</template>
<script>
import list from "@/components/list";
import Myfoot from "@/components/Myfoot";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      ress: [],
      nav:['装修前','装修中','装修后'],
      flag:0,
    };
  },
  mounted() {
    this.$http.get("/home/gonglue").then((res) => {
      console.log(res.data.list);
      this.ress = res.data.list;
    });
  },
  components: {
    list,
    Myfoot,
  },
  methods: {
    gotoProcess() {
      this.$router.push("/process");
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>

.about {
  width: 100%;
  height: 100%;
}

.head {
  width: 100%;
  height: 88px;
  background-color: #39c893;
  float: left;
  .erwm {
    width: 80px;
    height: 88px;
    margin-left: 20px;
    // border: red 1px solid;
    float: left;
    img {
      width: 100%;
      height: 100%;
      // float: left;
    }
  }
  .size {
    width: 240px;
    // border: red 1px solid;
    height: 88px;
    float: left;
    margin-left: 10px;
    img {
      margin-top: 10px;
      width: 80%;
    }
    .guanzhu {
      width: 240px;
      // border: red 1px solid;
      float: left;
      margin-top: 10px;
      border-radius: 19px;
      line-height: 15px;
      display: block;
      height: 15px;
      background-color: #2bb280;
      color: white;
      font-size: 13px;
    }
    .huang {
      color: rgb(228, 215, 38);
    }
  }
  .cha {
    // border: red 1px solid;
    float: left;
    width: 1rem;
    height: 1rem;
    font-size: 20px;
  }
}

.ul {
  width: 100%;
  margin-top: 10px;
  height: 40px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  li {
    line-height: 40px;
    text-align: center;
    width: 125px;
  }
  .active {
    border-bottom: 2px solid #39c893;
  }
}
.shou {
  width: 100%;
  height: 120px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 18px 0;
    li {
      text-align: center;
      width: 94px;
      display: flex;
      flex-direction: column;
      align-items: center;
      i {
        border: 3px solid #39c893;
        width: 50px;
        height: 50px;
        line-height: 45px;
        display: block;
        color: #39c893;
        border-radius: 50%;
        font-size: 26px;
    }
  }
}
.button {
  width: 98%;
  margin-left: 2px;
  border: 1px solid #39c893;
  color: #39c893;
}
.tuijian {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  background-color: #fff;
  margin-top: 10px;
  span {
    display: inline-block;
    width: 3px;
    height: 30px;
    background-color: #39c893;
    vertical-align: middle;
    margin-left: 10px;
  }
  h3 {
    height: 30px;
    line-height: 30px;
    font-weight: normal;
    font-size: 20px;
    margin-left: 10px;
  }
}

.fang {
  width: 100%;
  background-color: #ffffff;
}
.list {
  width: 100%;
  // height: 95px;
}
</style>
